<template>
	<div class="root">
	  <an-nav></an-nav>
  
	  <cropper-img
		v-model:show="cutImg.show"
		:name="pageData.spaceValue"
		:pic="cutImg.pic"
		@img="getList"
	  >
	  </cropper-img>
  
	  <div class="c1">
		<div class="c2 flex">
		  <el-button class="c4" type="primary">
			<input
			  type="file"
			  ref="uploadInput"
			  accept="image/jpg, image/jpeg, image/png"
			  @change="selectFile"
			/>
			单图裁剪上传到{{ pageData.spaceValue }}
		  </el-button>
  
		  <el-upload
			:data="publicParams"
			:on-success="imgSuccess"
			:multiple="true"
			:before-upload="imgFun"
			:show-file-list="false"
			:action="config.baseUrl + 'api/img/upImg'"
			:auto-upload="true"
		  >
			<el-button type="primary"
			  >多图上传到{{ pageData.spaceValue }}</el-button
			>
		  </el-upload>
		</div>
  
		<div class="flex c5">
		  <div v-for="(v, i) in pageData.list" :key="i" class="c6">
			<el-image
			  :src="config.serverImg + v.key"
			  fit="scale-down"
			  lazy
			  style="width: 100%; height: 100%"
			>
			</el-image>
			<div class="c7 flex">
			  <div @click="copy(config.serverImg + v.key)">复制</div>
			  <div @click="delImg(v, i)">删除</div>
			</div>
		  </div>
		</div>
	  </div>
  
	  <!-- 分页 -->
	  <div style="margin-top: 10px">
		<el-pagination
		  background
		  @size-change="switchSizeChange"
		  @current-change="switchCurrentChange"
		  v-model:currentPage="pageData.page"
		  :default-page-size="pageData.limit"
		  layout="total,prev, pager, next,sizes"
		  :page-sizes="[60, 100, 200]"
		  :total="pageData.total"
		>
		</el-pagination>
	  </div>
	</div>
  </template>
  
  <script setup>
  import md5 from "js-md5";
  let queryTime = Date.parse(new Date()) / 1000;
  const publicParams = reactive({
	lang: "",
	token: "",
	client: "admin",
	time: queryTime,
	sign: md5(queryTime + 100 + ""),
  });
  
  const imgFun = () => {
	let queryTime = Date.parse(new Date()) / 1000;
	publicParams.time = queryTime;
	publicParams.sign = md5(queryTime + 100 + "");
  };
  
  import cropperImg from "@/components/cropper-img.vue";
  
  import time from "@/utils/timeFormat.js";
  
  import publicJS from "@/hook/public.js";
  const { copy, aTips, config, api, ElMessage } = publicJS();
  
  // 页面数据
  const pageData = reactive({
	list: [], //列表
	spaceValue: "local",
	total: 0,
	page: 1,
	limit: 60,
  });
  
  const uploadInput = ref(null);
  const cutImg = reactive({
	show: false,
	pic: "",
  });
  
  //选择文件
  const selectFile = (e) => {
	cutImg.pic = "";
	// 获取选取的文件
	const target = e.target;
	const { files } = target;
	if (!files) return;
	const file = files[0];
	// 转换为base64传给裁切组件
	const reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = () => {
	  // 更新裁切弹窗的图片源
	  cutImg.pic = String(reader.result);
	  cutImg.show = true;
  
	  // 清空已选择的文件
	  if (!uploadInput.value) return;
	  uploadInput.value.value = "";
	};
  };
  
  //获取列表
  const getList = () => {
	api
	  .post("api/Img/get_list", {
		prefix: "local",
		limit: pageData.limit,
		page: pageData.page,
	  })
	  .then((res) => {
		pageData.total = res.total;
		pageData.list = res.data.list.map((r) => {
		  return {
			id: r.id,
			...r,
		  };
		});
	  });
  };
  getList();
  
  // 切换每页条数
  const switchSizeChange = (val) => {
	console.log(`每页 ${val} 条`);
	pageData.limit = val;
	getList();
  };
  
  // 点击分页
  const tableRef = ref(null);
  const switchCurrentChange = (val) => {
	console.log(`当前页: ${val}`);
	getList();
  };
  
  //覆盖默认的 Xhr 行为，允许自行实现上传文件的请求
  const upQiniuImg = (data) => {
	var reader = new FileReader();
	reader.readAsDataURL(data.file);
	reader.onloadend = function () {
	  var base64 = reader.result;
	  upFile(pageData.spaceValue, base64, (res) => {
		getList();
	  });
	};
  };

  const imgSuccess = (e)=>{
	ElMessage({
		message: "上传成功",
		type: "success",
	});
	getList();
  }
  
  //删除文件
  const delImg = (v, index) => {
	aTips("确定删除文件？", (e) => {
	  console.log(v.key);
	  api
		.post("api/img/del_server_img", {
		  path: v.key,
		  id: v.id,
		})
		.then((r) => {
		  pageData.list.splice(index, 1);
		  if (r.code == 200) {
			ElMessage({
			  message: "删除成功",
			  type: "success",
			});
		  } else {
			ElMessage({
			  message: "删除失败",
			  type: "error",
			});
		  }
		});
	});
  };
  </script>
  <style lang="scss" scoped>
	  .c1 {
		padding: 0 20px;
		position: relative;
	  }
	  /* .c2{align-items: flex-start;position: absolute;right: 20px;z-index: 1;} */
	  .c4 {
		position: relative;
		cursor: pointer;
		margin-right: 10px;
		overflow: hidden;
	  }
	  .c4 input {
		position: absolute;
		font-size: 100px;
		right: 0;
		top: 0;
		opacity: 0;
		filter: alpha(opacity=0);
		cursor: pointer;
	  }
	  .c5 {
		flex-wrap: wrap;
		width: calc(100% + 20px);
		margin-left: -5px;
	  }
	  .c6 {
		width: 116px;
		height: 116px;
		border: 1px solid #f1f1f1;
		margin: 10px;
		position: relative;
		background: #f1f1f1;
	  }
	  .c6:hover {
		border-color: var(--el-color-primary);
		cursor: pointer;
		.c7 {
		  opacity: 1;
		}
	  }
	  .c7 {
		width: 100%;
		height: 25px;
		background: var(--el-color-primary-light-2);
		color: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		text-align: center;
		font-size: 13px;
		line-height: 25px;
		opacity: 0;
		transition: 0.3s;
		justify-content: space-between;
		div {
		  width: 50%;
		}
	  }
	  </style>